<template>
    <div class="dialog">

        <!-- visible.sync 添加以后才能正常关闭-->
        <el-dialog :title="dialog.title"
                   :visible.sync="dialog.show"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   :modal-append-to-body="false">

            <div class="form">
                <el-form
                        ref="form"
                        :model="fromData"
                        :rules="rules"
                        label-width="120px"
                        style="margin:10px;width:auto;">

                    <el-form-item prop='name' label="用户名:">
                        <el-input type="name" v-model="fromData.name"></el-input>
                    </el-form-item>

                    <el-form-item label="备注:">
                        <el-input type="textarea" v-model="fromData.remark"></el-input>
                    </el-form-item>

                    <el-form-item class="text_right">
                        <el-button @click="dialog.show = false">取 消</el-button>
                        <el-button type="primary" @click='onSubmit'>提 交</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "CompanyDialog",
        props: {
            dialog: Object,
            fromData: Object
        },
        data() {
            return {
                role_list: [
                    "admin",
                    "普通用户",
                ],
                rules: {
                    name: [
                        {required: true, message: "用户名不能为空！", trigger: "blur"}
                    ]
                }
            }
        },
        methods: {
            onSubmit() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        //表单数据验证完成之后，提交数据;
                        const url =
                            this.dialog.option == "add" ? "add" : `edit/${this.fromData.id}`;
                        this.$axios.post(`/api/profile/${url}`, this.fromData).then(res => {
                            // 操作成功
                            this.$message({
                                message: "保存成功！",
                                type: "success"
                            });
                            this.dialog.show = true;
                            this.$emit("update");    //父的update
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
